<template>
    <v-card height="660px">
        <v-card-title>
            <h4>{{ operate === 'add'? "新增任务": "修改任务："+info.job_name }}</h4>
        </v-card-title>
        <v-card-text>
            <v-row dense>
                <v-col cols="12" md="2"><h4>任务信息：</h4></v-col>
                <v-col cols="12" md="3">
                    <v-text-field
                        v-model="info.job_id"
                        label="任务ID"
                        outlined
                        dense
                        :disabled="is_job_id"
                    ></v-text-field>
                </v-col>
                <v-col cols="12" md="3">
                    <v-text-field
                        v-model="info.job_name"
                        label="任务名称"
                        outlined
                        dense
                    ></v-text-field>
                </v-col>
                <v-col cols="12" md="4">
                    <v-combobox
                        v-model="info.funName"
                        :items="FuncItems"
                        label="函数名称"
                        outlined
                        dense
                        @change="changeFunc"
                        :readonly="is_job_id"
                    ></v-combobox>
                </v-col>
            </v-row>
            <v-row dense>
                <v-col cols="12" md="2"><h4>任务状态：</h4></v-col>
                <v-col cols="12" md="3">
                    <v-checkbox
                    v-model="info.flag"
                    :label="info.flag?'启用':'不启用'"
                    dense
                    disabled
                    ></v-checkbox>
                </v-col>
                <v-col cols="12" md="3">
                    <v-menu
                        v-model="menu2"
                        :close-on-content-click="false"
                        :nudge-right="40"
                        transition="scale-transition"
                        offset-y
                        min-width="auto"
                    >
                        <template v-slot:activator="{ on, attrs }">
                            <v-combobox
                                v-model="info.skip_date"
                                :items="CoroItems"
                                label="跳过日期"
                                outlined
                                dense
                                readonly
                                v-bind="attrs"
                                v-on="on"
                            ></v-combobox>
                        </template>
                        <v-date-picker
                            v-model="info.skip_date"
                            @input="menu2 = false"
                        ></v-date-picker>
                    </v-menu>
                </v-col>
            </v-row>    
            <v-row dense>
                <v-col cols="12" md="2"><h4>任务时间： </h4></v-col>
                <v-col cols="12" md="3">
                    <v-combobox
                        v-model="corm_type"
                        :items="job_dict"
                        label="触发类型"
                        outlined
                        dense
                    ></v-combobox>
                </v-col>
                <v-col cols="12" md="4">
                    <v-text-field
                        v-if="corm_type==='定时调度'"
                        v-model="info.corn_day"
                        label="触发日期：0-6表示周一到周日"
                        outlined
                        dense
                    ></v-text-field>
                    <v-text-field
                        v-if="corm_type==='间隔调度'"
                        v-model="info.corn_day"
                        label="间隔天数"
                        outlined
                        dense
                    ></v-text-field>
                    <v-text-field
                        v-if="corm_type==='corn表达式'"
                        v-model="info.corn_day"
                        label="Corn表达式"
                        outlined
                        dense
                    ></v-text-field>
                    <v-menu
                        v-if="corm_type==='执行一次'"
                        v-model="menu5"
                        :close-on-content-click="false"
                        :nudge-right="40"
                        transition="scale-transition"
                        offset-y
                        min-width="auto"
                    >
                        <template v-slot:activator="{ on, attrs }">
                            <v-combobox
                                v-model="info.corn_day"
                                label="触发日期"
                                outlined
                                dense
                                readonly
                                v-bind="attrs"
                                v-on="on"
                            ></v-combobox>
                        </template>
                        <v-date-picker
                            v-model="info.corn_day"
                            @input="menu5 = false"
                        ></v-date-picker>
                    </v-menu>
                </v-col>
                <v-col cols="12" md="3">
                    
                    <v-btn
                        v-if="corm_type==='corn表达式'"
                        text
                        @click="view_corn"
                    >
                        <span class="mr-4">corn配置方式</span>
                    </v-btn>
                    <!-- <v-btn
                        v-if="corm_type==='corn表达式'"
                        href="https://cron.qqe2.com/"
                        target="_blank"
                        text
                    >
                        <span class="mr-4">corn生成器</span>
                        <v-icon small>mdi-open-in-new</v-icon>
                    </v-btn> -->
                    <v-menu
                        v-if="corm_type!=='corn表达式'"
                        v-model="menu3"
                        :close-on-content-click="false"
                        :nudge-right="40"
                        transition="scale-transition"
                        offset-y
                        min-width="auto"
                    >
                        <template v-slot:activator="{ on, attrs }">
                            <v-combobox
                                v-model="HourMin"
                                :items="CoroItems"
                                label="时间-hour:min"
                                outlined
                                dense
                                readonly
                                v-bind="attrs"
                                v-on="on"
                            ></v-combobox>
                        </template>
                        <v-time-picker
                            v-model="HourMin"
                            format="24hr"
                            @input="menu3 = false"
                        ></v-time-picker>
                    </v-menu>
                </v-col>
            </v-row>    
            <v-row dense>
                <v-col cols="12" md="2"><h4>选择人员：</h4></v-col>
                <v-col cols="12" md="10">
                    <v-combobox
                        v-model="info.groups"
                        :items="GroupItems"
                        label="群组成员"
                        outlined
                        dense
                        multiple
                    ></v-combobox>
                </v-col>
            </v-row>    
            <v-row dense>
                <v-col cols="12" md="2"><h4>任务参数：</h4></v-col>   
                <v-col cols="12" md="10">
                    <div id="params_info">
                        <textarea v-model="info.param" style="display:none;"></textarea>
                    </div>
                </v-col>    
            </v-row>
        </v-card-text>
        <v-card-actions>
            <v-row>
                <v-cols cols="12" md="1"></v-cols>
                <v-cols cols="12" md="1"><v-btn color="primary" @click="addJob" style="margin-left:40px">{{ operate === 'add'? '新增' : '修改' }}</v-btn></v-cols>
                <v-cols cols="12" md="3"></v-cols>
                <v-cols cols="12" md="1"><v-btn color="green" @click="startJob" style="margin-left:40px">启用任务</v-btn></v-cols>
                <v-cols cols="12" md="1"><v-btn color="blue" @click="endJob" style="margin-left:40px">停止任务</v-btn></v-cols>
                <v-cols cols="12" md="1"><v-btn color="error" @click="deleteJob" style="margin-left:40px">删除任务</v-btn></v-cols>
            </v-row>
        </v-card-actions>
    </v-card>
</template>

<script>
import {defineComponent} from '@vue/composition-api'

export default defineComponent({
    setup() {

    },
    props: {
        operate: {
            type: Object,
            default: 'add'
        },
        info: {
            type: Object,
            default: {
                job_id: null,
                job_name: '',
                funName: '',
                flag: false,
                corn_type: 'corn',
                corn_day: '',
                corn_hour: '',
                corn_min: '',
                skip_date: '',
                groups: [],
                param: ''
            }
        }
    },
    data(){
        return {
            instance: null,
            menu2: false,
            menu3: false,
            menu4: false,
            persons: [],
            GroupItems: [],
            FuncItems: ['auto_update_script', 'auto_update_process', 'delet_history_dirs', 'query_jira_info', 'query_ts_modification', 'exec_task', 'query_config', 'print_log'],
            job_type: ['corn', 'interval', 'date', 'form'],
            job_dict: ['定时调度', '间隔调度', '执行一次', 'corn表达式'],
            corm_type: '定时调度',
            HourMin: '02:01',
            content: '',
            CoroItems: [],
            is_job_id: false,

        }
    },
    mounted(){
        this.initMarkdown()
        this.get_names()
        this.init_data()
    },
    methods: {
        initMarkdown: function(){
            console.log('initMarkdown ...')
            console.log(this.info)
            this.instance = window.editormd("params_info", {
                height: '200px',
                width: '100%',
                path: 'editormd/lib/',
                // markdown: this.info.param,
                mode: 'YAML',
                toolbar  : false,
                watch: false,
            })
            // this.content = this.info.param
        },
        load_edit(){
            console.log('load_edit .. ')
            if(this.instance!==null){
                this.instance.setMarkdown(this.param)
            }
        },
        init_data(){
            if(this.info.job_id===null){
                this.is_job_id = false
            }else {
                this.is_job_id = true
                console.log('init_data ... ')
                let hour = this.info.corn_hour < 10 ? "0" + String(this.info.corn_hour) : String(this.info.corn_hour) ; // 如果只有一位，则前面补零
                let minute = this.info.corn_min < 10 ? "0" + String(this.info.corn_min) : String(this.info.corn_min); // 如果只有一位，则前面补零
                console.log(this.corn_hour)
                console.log(this.corn_min)
                this.HourMin = hour + ':' + minute
                console.log(this.HourMin)

                let corn_index = this.job_type.indexOf(this.info.corn_type)
                this.corm_type = this.job_dict[corn_index]
            }
        },
        view_corn(){
            let express = `
Corn表达式配置方式：
1.有5个字段，依次是[min hour day month day_of_week],表示运行的分钟数，小时数，天数，月份，星期数
2.每个字段支持都支持2种配置方式：AllExpression (*/step,*)；step表示间隔
3.范围配置方式：RangeExpression (first,first-last,first/step,first-last/step)；first表示起始时间，last表示结束时间，step表示间隔
4.day_of_week：0-6表示周一到周日
5.参考：https://cron.qqe2.com/，区别是配置时不要包括第一个秒的字段；且不支持？。
示例：
0/1 * * * * : 表示每隔1min触发一次
0 5 * * 0-4 ：表示每周一到周五的05:00触发
`       
            console.log(express)
            alert(express)
        },
        get_names(){
            console.log('get_names ... ')
            this.$api.job.queryGroupNames().then(res=>{
                this.GroupItems = res.data.data
            })
        },
        changeFunc(){
            console.log('changeFunc ... ')
            let get_data = {'func': this.info.funName}
            this.$api.job.queryFuncParams(get_data).then(res=>{
                this.instance.setMarkdown(res.data.data)
            })
        },
        addJob(){
            console.log('addJob ... ')
            let index = this.job_dict.indexOf(this.corm_type)
            this.info.corn_type = this.job_type[index]
            this.info.param = this.instance.getMarkdown()
            let h_m = this.HourMin.split(':')
            if(h_m.length===2){
                this.info.corn_hour = h_m[0]
                this.info.corn_min = h_m[1]
            }
            console.log(this.info)
            let post_data = {'data': JSON.stringify(this.info)}
            console.log(post_data)
            this.$api.job.addJobConfig(post_data).then(res=>{
                alert(res.data.message)
            })
        },
        startJob(){
            if(this.info.job_id){
                if(this.info.flag){
                    alert('任务已启用')
                }else{
                    console.log('startJob: ' + this.info.job_id)
                    let get_data = {'job_id': this.info.job_id, 'status': false}
                    this.$api.job.modifyJobStaus(get_data).then(res=>{
                        if(res.data.success===1){
                            let post_data = {'operate': 'add', 'params': JSON.stringify(res.data.data)}
                            console.log(post_data)
                            this.$api.job.operateJob(post_data).then(res=>{
                                console.log(res)
                                if(res.data.data){
                                    let get_data = {'job_id': this.info.job_id, 'status': true}
                                    this.$api.job.modifyJobStaus(get_data).then(res=>{
                                        alert(res.data.message)
                                        this.info.flag = true
                                    })
                                }else {
                                    alert(res.data.message)
                                }
                            })
                        }else {
                            alert(res.data.message)
                        }
                    })
                }
            }else {
                alert('任务ID为空！')
            }
        },
        endJob(){
            if(this.info.job_id){
                if(this.info.flag){
                    console.log('startJob: ' + this.info.job_id)
                    let get_data = {'job_id': this.info.job_id, 'status': true}
                    this.$api.job.modifyJobStaus(get_data).then(res=>{
                        if(res.data.success===1){
                            let post_data = {'operate': 'remove', 'params': JSON.stringify({'job_id': this.info.job_id})}
                            console.log(post_data)
                            this.$api.job.operateJob(post_data).then(res=>{
                                console.log(res)
                                if(res.data.data){
                                    let get_data = {'job_id': this.info.job_id, 'status': false}
                                    this.$api.job.modifyJobStaus(get_data).then(res=>{
                                        alert(res.data.message)
                                        this.info.flag = false
                                    })
                                }else {
                                    alert(res.data.message)
                                }
                            })
                        }else {
                            alert(res.data.message)
                        }
                    })
                }else{
                    alert('任务未启用')
                }
            }else {
                alert('任务ID为空！')
            }
        },
        deleteJob(){
            if(this.info.flag){
                alert('运行状态的任务，不允许删除！')
            }else {
                let get_data = {'job_id': this.info.job_id}
                this.$api.job.deleteJobConfig(get_data).then(res=>{
                    alert(res.data.message)
                    if(res.data.success===1){
                        this.$emit('queryJobList')
                    }
                })
            }
        }
    }
})
</script>

<style scoped>
#params_info > a {
    display: none;
}
</style>